<template>
  <el-dialog title="采购订单查询" :close-on-click-modal="false" :visible.sync="visible" fullscreen append-to-body center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-card class="box-card" style="margin-bottom: 15px;">
      <div class="text item">
        <el-form inline>
          <el-form-item label="所属制造商">
            <el-input v-model="dataForm.supplyName">
              <el-button slot="append" @click="selectSupplyDialog">选择</el-button>
            </el-input>
          </el-form-item>

          <el-form-item label="采购类型" prop="ctgId">
            <el-select v-model="dataForm.ctgId" placeholder="请选择">
              <el-option v-for="item in ctgOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="getDataList">查询</el-button>
            <el-button icon="el-icon-delete" type="info" @click="clearSearchForm">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-table :data="dataList" height="calc(100vh - 215px)" ref="singleTable" border v-loading="dataListLoading" header-cell-class-name="miui-header-cell-style">
      <el-table-column type="index" width="50">
        <template slot-scope="scope">
          <el-radio v-model="dataForm.orderId" :label="scope.row.id" style="position: relative;left: 6px;top:-2px;"
            @change="checkItem(scope.row)">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="billId" label="单据编号"></el-table-column>
      <el-table-column prop="ctgName" label="采购类别"></el-table-column>
      <el-table-column prop="supplyName" label="制造商"></el-table-column>
      <el-table-column prop="createUserName" label="制单人"></el-table-column>
      <el-table-column prop="auditUserName" label="审核人"></el-table-column>
      <el-table-column prop="createTime" label="采购日期"></el-table-column>
    </el-table>
    <div class="avue-crud__pagination">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>
    <search-supply v-if="supplySearchVisible" ref="supplySearch" @refreshData="checkSupply"></search-supply>
  </el-dialog>
</template>

<script>
  import { filterParams } from '@/util/tools'
  import {
    receiveApplyFetchList,
    receiveApplyGetObj
  } from '@/api/eims/purchase/receive-apply'
  import { getCtgList } from '@/api/eims/ctg'

  import SearchSupply from '@/components/business/SearchSupply'
  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          supplyId: '',
          code: '',
          name: '',
          ctgId: ''
        },
        dataList: [],
        ctgOptions: [],
        dataListLoading: false,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        supplySearchVisible: false
      }
    },
    components: {
      SearchSupply
    },
    methods: {
      init() {
        this.visible = true
        for (let key in this.dataForm) {
          this.dataForm[key] = ''
        }
        this.getDataList()
        this.getCtgListOption()
      },
      clearSearchForm() {
        for (let key in this.dataForm) {
          this.dataForm[key] = ''
        }
      },
      getDataList() {
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize,
          applyStatus: '1'
        }
        let params2 = filterParams(this.dataForm)
        this.dataListLoading = true
        receiveApplyFetchList(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
					this.dataListLoading = false
        })

      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      //  选择数据
      checkItem(val) {
        receiveApplyGetObj(val.id).then(response => {
          if(response.data.code == '0'){
            let data = {
              billId: response.data.data.data.billId,
              ctgId: response.data.data.data.ctgId,
              supplyId: response.data.data.data.supplyId,
              supplyName: response.data.data.data.supplyName,
              list: response.data.data.data.detailList
            }
            this.visible = false
            this.$emit('refreshData', data)
          }else{
            this.$message.error(response.data.msg)
          }

        })
      },
      // 获取商品类别列表
      getCtgListOption() {
        getCtgList().then(response => {
          if(response.data.code == '0'){
            let ctgData = response.data.data
            let list = []
            ctgData.forEach(item => {
              let ctgObj = {
                value: item.id,
                label: item.name
              }
              list.push(ctgObj)
            })
            this.ctgOptions = list
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //  选择制造商
      selectSupplyDialog() {
        let data = {
          ctgId: ''
        }
        this.supplySearchVisible = true
        this.$nextTick(() => {
          this.$refs.supplySearch.init(data)
        })
      },
      //  获取制造商数据
      checkSupply(data) {
        this.dataForm.supplyId = data.id
        this.dataForm.supplyName = data.name
      },
    }
  }
</script>

<style>
</style>
